<script lang="ts" setup>
import FixedBottom from '@/components/FixedBottom.vue'
import homeIcon from '@/assets/img/tabBar/home.png'
import homeActiveIcon from '@/assets/img/tabBar/home-a.png'
import demoIcon from '@/assets/img/tabBar/demo.png'
import demoActiveIcon from '@/assets/img/tabBar/demo-a.png'
import mineIcon from '@/assets/img/tabBar/mine.png'
import mineActiveIcon from '@/assets/img/tabBar/mine-a.png'

import { computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

type TabBarItem = {
  index: number
  name: string
  icon: string
  path: string
}

const props = withDefaults(defineProps<{
  active?: number
}>(), {
  active: 0
})

const tabBarList = computed(() => [
  {
    index: 0,
    name: '首页',
    icon: props.active === 0 ? homeActiveIcon : homeIcon,
    path: '/'
  },
  {
    index: 1,
    name: '示例',
    icon: props.active === 1 ? demoActiveIcon : demoIcon,
    path: '/demo'
  },
  {
    index: 2,
    name: '我的',
    icon: props.active === 2 ? mineActiveIcon : mineIcon,
    path: '/mine'
  }
])

function clickTabBarItem (item: TabBarItem) {
  router.push(item.path)
}

</script>

<template>
  <FixedBottom>
    <div class="tab-bar">
      <div
        v-for="item in tabBarList"
        :key="item.path"
        class="tab-bar-item"
        :class="{'active': active === item.index}"
        @click="clickTabBarItem(item)"
      >
        <img :src="item.icon" class="tab-bar-icon" alt="">
        <span class="tab-bar-item-name">{{item.name}}</span>
      </div>
    </div>
  </FixedBottom>
</template>

<style scoped lang="scss">
.tab-bar {
  height: 100%;
  display: flex;
  align-items: center;
  .tab-bar-item {
    flex: 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    color: #909DAF;
    .tab-bar-icon {
      width: 48px;
      height: 48px;
    }
    .tab-bar-item-name {
      margin-top: 2px;
      font-size: 24px;
    }
  }
  .tab-bar-item.active {
    color: var(--main-color);
  }
}
</style>
